<template>
    <div class="user-up-container">
           <el-form ref="userInfo" :model="userInfo" label-width="100px">
         <el-form-item label="你的名字">
            <el-input v-model="userInfo.name" class="in" ></el-input>
         </el-form-item>
        <el-form-item label="你的联系号码">
            <el-input v-model.number="userInfo.mobile" @input="onChange" :maxlength="11" class="in" >  
            </el-input>
            <span v-show="!ispoen" > 手机号码不合法</span>
        </el-form-item>
        <el-form-item label="读者类型">
            <el-select v-model="userInfo.type" placeholder="请选择读者类型">
            <el-option label="学生" value="学生"></el-option>
            <el-option label="老师" value="老师"></el-option>
            <el-option label="其他" value="其他"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="生日">
            <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="userInfo.birthday" style="width: 50%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
        </el-form-item>
        <el-form-item label="是否公开个人界面">
            <el-switch v-model="userInfo.readroot"></el-switch>
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="userInfo.sex">
            <el-radio label= true >男</el-radio>
            <el-radio label= false >女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"  @click="onSubmit">提交</el-button>
            <el-button type="primary"  @click="onSu">取消</el-button>
        </el-form-item>
     </el-form>     
    </div>
</template>
<script>
export default {
    data(){
        return{
            userInfo:null,
            ispoen:true,
            id:""
        }
    },
    computed:{
        UserInfo(){
            return store.getters.getUserInfo;
        }
    },
    async created(){
        // if(store.getters.getUserInfo == null){
        //     this.userInfo = await this.$axios.get("/api/user/one");
        // }else{
        //      this.userInfo = store.getters.getUserInfo;
        // }
       const id  = location.hash.substr(-1)
       this.id = id;
         this.userInfo = await this.$axios.get("/api/admin/getUserId",{
             params:{
                 id
             }
         })
        

        
    },
    methods:{
        onChange(){
            const r = /^0?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}$/;
          this.ispoen = r.test(this.userInfo.mobile);
        },
        onSu(){
            this.$router.push("/")
        },
        async onSubmit(){
            const result = await this.$axios.put("/api/admin/upUser",{
                id:this.id,
                obj:this.userInfo
            }) 
          
            if(result){
                 this.$message({
                      showClose: true,
                      message: '修改成功！',
                      type: 'success'
                });
                 this.$router.push("/");
            }else{
                 this.$message({
                      showClose: true,
                      message: '修改失败！',
                      type: 'error'
                });
            }
        }
    }
}
</script>
<style lang="less">
.in{
        width: 46% !important;
        
        
    }
</style>